<template>
  <div>
    <el-container>
      <el-header>
        <YmLogo></YmLogo>
        <YmHeaderRight></YmHeaderRight>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <YmLeftMenu></YmLeftMenu>
        </el-aside>
        <el-container>
          <el-main class="em-main">
            <ModulesTab></ModulesTab>
          </el-main>
          <el-footer>版权所有 盗版必究</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import YmLogo from '@/components/YmLogo.vue'
  import YmHeaderRight from '@/components/YmHeaderRight.vue'
  import YmLeftMenu from '@/components/YmLeftMenu.vue'
  import ModulesTab from '@/components/common/ModulesTab.vue'
  export default {
    data() {
      return {

      }
    },
    components: {
      YmLogo,
      YmHeaderRight,
      YmLeftMenu,
      ModulesTab
    }
  }
</script>

<style scoped>
  .el-header,
  .el-footer {
    background-color: rgb(84, 92, 100);
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-footer {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .em-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
